<template>
  <el-menu
    mode="vertical"
    :collapse="isCollapse"
    :default-active="activeMenu"
    :unique-opened="false"
    :router="true"
  >
    <SidebarItem
      v-for="menu in recursiveMenuList"
      :key="menu.path"
      :item="menu"
      :base-path="menu.path"
    />
  </el-menu>
</template>
<script setup lang="ts">
import SidebarItem from './SidebarItem.vue'
import useAuthStore from '@/stores/modules/auth.ts'
import useAppStore from '@/stores/modules/app.ts'

const authStore = useAuthStore()
const appStore = useAppStore()

// 侧边栏折叠状态
const isCollapse = computed(() => !appStore.sidebar.opened)

// 递归菜单列表
const recursiveMenuList = computed(() => {
  return authStore.recursiveMenuList
})

// 当前激活的菜单
const route = useRoute()
const activeMenu = computed(() => {
  const { meta, path } = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
</script>
